<template>
  <div class="news">
      <h1>资讯</h1>
      <div class="row">
        <div v-for="s in songList" :key="s.album_id" class="item col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <img :src="s.album_500_500" alt="">
          <h4 class="txt">{{s.album_title}}</h4>
          <h5 class="txt">{{s.author}}</h5>
        </div>
        <button class="btn btn-block btn-danger" @click="loadMore">加载更多</button>
      </div>
  </div>
</template>
<script>
import { getMusicData } from "../services/music";
export default {
  name: "News",
  data() {
    return {
      songList: [], //歌曲列表
      page: 1
    };
  },
  methods: {
    loadData() {
      getMusicData({
        method: "baidu.ting.billboard.billList",
        type: 1,
        size: 10,
        offset: (this.page - 1) * 10
      }).then(res => {
        console.log(res);
        this.songList = this.songList.concat(res.data.song_list);
        this.page += 1;
      });
    },
    loadMore() {
      this.loadData();
    }
  },
  created() {
    this.loadData();
  }
};
</script>
<style scoped>
.news {
  margin-bottom: 100px;
}
.item {
  height: 200px;
  border: 1px solid deepskyblue;
  padding-top: 10px;
  background-color: lightskyblue;
  margin-bottom: 20px;
  border-radius: 50%;
}
.item img {
  border-radius: 50%;
  width: 100px;
  margin: 0 auto;
  display: block;
}
.item .txt {
  text-align: center;
  color: white;
}
</style>
